<script>
  import $ from 'dfish-widget'
  import Widget from '../Widget.vue'

  export default {
    mixins: [Widget],
    data() {
      return {
        name: 'Loading',
        remark: '显示正在加载的提示框',
        hasCommon: false,
        attrs: [{
          name: 'text',
          remark: '显示文本',
          type: 'String',
          default: '正在加载..'
        }, {
          name: 'icon',
          remark: '图标地址',
          type: 'String',
          option: 'URL字符串，或以<var>.</var><var>#</var>开头的样式名',
          default: '#f-svg-loading',
        }, {
          name: 'hide',
          remark: '是否关闭提示框',
          type: 'Boolean',
        }, {
          name: 'cover',
          remark: '是否显示一个全屏的半透明蒙版',
          type: 'Boolean',
        }, {
          name: 'local',
          remark: '是否显示在commander的范围内',
          type: 'Boolean',
        }, {
          name: 'timeout',
          remark: '定时关闭。单位:毫秒',
          type: 'Number',
        }, ],
        examples: [{
          remark: '点击按钮显示一个Loading框，并且这个提示框在当前view的范围内；1秒后关闭',
          type: 'html',
					view: true,
          code: `
            <template>
              <w-buttonbar gap="10">
                <w-button @click="showLoading" text="显示Loading"></w-button>
              </w-buttonbar>
            </template>
            <${'script'}>
              import $ from 'dfish-widget'
              export default {
                methods: {
                  showLoading(e) {
                    $.vm(e).pop(
                      'w-loading',
                      {text: '正在加载', local: true, cover: true},
                      {
                        init: (pop) => {
                          setTimeout(() => pop.close(), 1000)
                        }
                      }
                    )
                  }
                }
              }
            </${'script'}>
          `,
					comp: {
						methods: {
						  showLoading(e) {
                $.vm(e).pop(
                  'w-loading',
                  {text: '正在加载', local: true, cover: true},
                  {
                    init: (pop) => {
                      setTimeout(() => pop.close(), 1000)
                    }
                  }
                )
						  }
						}
					}
        }]
      }
    }
  }
</script>
